<template>
  <div class="flex justify-between pb-2 mb-2 border-b">
    <div class="flex-1 flex justify-left items-center">
      <span>可用：</span>
      <n-tag
        :bordered="false"
        size="small"
        round
        :type="inventoryItem.qtyAvailable > 0 ? 'success' : 'error'"
      >
        {{ inventoryItem.qtyAvailable }}
      </n-tag>
    </div>
    <div class="flex-1 flex justify-center items-center">
      <span>入库锁定：</span>
      <n-tag
        :bordered="false"
        size="small"
        round
        :type="inventoryItem.qtyLocked > 0 ? 'success' : 'error'"
      >
        {{ inventoryItem.qtyLocked }}
      </n-tag>
    </div>
    <div class="flex-1 flex justify-center items-center">
      <span>出库锁定：</span>
      <n-tag
        :bordered="false"
        size="small"
        round
        :type="inventoryItem.qtyLocked > 0 ? 'success' : 'error'"
      >
        {{ inventoryItem.qtySalesLocked }}
      </n-tag>
    </div>
    <div class="flex-1 flex justify-end items-center">
      <span>已售：</span>
      <n-tag
        :bordered="false"
        size="small"
        round
        :type="inventoryItem.qtySold > 0 ? 'success' : 'error'"
      >
        {{ inventoryItem.qtySold }}
      </n-tag>
    </div>
  </div>
  <div class="rounded-md bg-gray-50 py-1 px-2">
    <n-grid :col="24">
      <n-gi span="12">
        <div class="text-center">
          <n-statistic label="平均费用">
            {{ currencyFormat(inventoryItem.avgCost) }}
          </n-statistic>
        </div>
      </n-gi>
      <n-gi span="12">
        <div class="text-center">
          <n-statistic label="最新费用">
            {{ currencyFormat(inventoryItem.lastCost) }}
          </n-statistic>
        </div>
      </n-gi>
    </n-grid>
  </div>
</template>
<script lang="ts" setup name="BasicInfo">
import { currencyFormat } from "@/common/utils/currencyFormatter/index.ts";
import { InventoryItem } from "@/types/model/inventory/vos/inventory.vo";

interface IProps {
  inventoryItem: InventoryItem;
}

withDefaults(defineProps<IProps>(), {});
</script>
